class ShuRuXiang extends HTMLElement {
	mingZi = null // 名字
    huaDong = null // 类型为数字时，滑动条
	shuRuKuang = null // 输入框
	xuanXiangKuang = null // 选项框

	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })

		let yangShi = document.createElement('style')
		yangShi.textContent = `
			input {
				color: #acf;
				background: rgba(50, 100, 200, 1);
				margin-left: 10px;
                padding: 0;
				width: 30px;
                height: 20px;
				border: none;
				border-radius: 2px;
				text-align: center;
			}
			input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
				appearance: none;
			}
			input[type=number] {
				appearance: textfield;
			}
			input:hover, select:hover {
				filter: brightness(1.2)
			}
			input:focus, select:focus {
				outline: none;
			}
			select {
				color: #acf;
				background: rgba(50, 100, 200, 1);
				margin-left: 10px;
                padding: 0;
				width: 100px;
                height: 20px;
				border: none;
				border-radius: 2px;
				text-align: center;
			}
			.ming-zi {
				width: 80px;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
            .hua-dong {
                position: relative;
                width: 100px;
                height: 20px;
                border-radius: 2px;
                background: rgba(50, 100, 200, 1);
            }
            .hua-dong:hover {
                cursor: col-resize;
                filter: brightness(1.2)
            }
            .hua-dong-tiao {
                background: #acf;
                position: absolute;
                width: 2px;
                height: 100%;
                left: 0;
            }
		`
		shadow.appendChild(yangShi)

		this.mingZi = document.createElement('div')
		this.mingZi.classList.add('ming-zi')
		shadow.appendChild(this.mingZi)
        // 滑动条
        this.huaDong = document.createElement('div')
		this.huaDong.classList.add('hua-dong')
		shadow.appendChild(this.huaDong)

        this.huaDongTiao = document.createElement('div')
		this.huaDongTiao.classList.add('hua-dong-tiao')
		this.huaDong.appendChild(this.huaDongTiao)
        // 输入框
		this.shuRuKuang = document.createElement('input')
		this.shuRuKuang.addEventListener('change', () => {
			this.shuRuKuangChuLi()
		})
		shadow.appendChild(this.shuRuKuang)
        // 滑动操作
        this.huaDong.addEventListener('pointerdown', () => {
			let pointermove = shiJian => {
				let { movementX } = shiJian
                let zuiDa = Number(this.getAttribute('zui-da'))
                let zuiXiao = Number(this.getAttribute('zui-xiao'))
                let zhi = Number(this.shuRuKuang.value)
                let jieGuo = zhi + (Math.sign(movementX) * ((zuiDa - zuiXiao) / 50))

                this.shuRuKuang.value = Math.min(Math.max(jieGuo, zuiXiao), zuiDa)
                this.shuRuKuangChuLi()
			}
			let pointerup = () => {
				document.removeEventListener('pointermove', pointermove)
				document.removeEventListener('pointerup', pointerup)
			}
			document.addEventListener('pointermove', pointermove)
			document.addEventListener('pointerup', pointerup)
		})
		//选项框
		this.xuanXiangKuang = document.createElement('select')
		shadow.appendChild(this.xuanXiangKuang)
		this.xuanXiangKuang.addEventListener('change', () => {
			this.gengXin(this.xuanXiangKuang.value)
		})
	}

	connectedCallback() {
		this.style = `
			${this.style.cssText}
			color: #dfefff;
			font-size: 15px;
			width: 100%;
			padding: 5px 10px;
			display: flex;
		`
	}

	static get observedAttributes() {
		return ['lei-xing', 'ming-zi', 'zhi', 'zui-da', 'zui-xiao'];
	}

	attributeChangedCallback(name, oldValue, newValue) {
		let shuRuKuang = this.shuRuKuang
		let huaDong = this.huaDong
		let xuanXiangKuang = this.xuanXiangKuang

        if (name == 'lei-xing') {
			xuanXiangKuang.style.display = huaDong.style.display = shuRuKuang.style.display = 'none'

			if (newValue == '数字') {
				shuRuKuang.style.display = 'unset'
				huaDong.style.display = 'unset'
                shuRuKuang.setAttribute('type', 'number')
            } else if (newValue == '颜色') {
				shuRuKuang.style.display = 'unset'
				huaDong.style.display = 'none'
                shuRuKuang.setAttribute('type', 'color')
            } else if (newValue == '选项') xuanXiangKuang.style.display = 'unset'
		}
		if (name == 'ming-zi') this.mingZi.textContent = newValue
        if (name == 'zhi') {
            shuRuKuang.value = newValue
            this.shuRuKuangChuLi()

			xuanXiangKuang.value = newValue
        }
        if (name == 'zui-da') {
            shuRuKuang.max = newValue
            this.shuRuKuangChuLi()
        }
        if (name == 'zui-xiao') {
            shuRuKuang.min = newValue
            this.shuRuKuangChuLi()
        }
	}
	// 输入框处理
    shuRuKuangChuLi() {
		let leiXing = this.getAttribute('lei-xing')
        let zuiDa = this.getAttribute('zui-da')
        let zuiXiao = this.getAttribute('zui-xiao')

		if (leiXing == '数字') {
			if (zuiDa !== null && zuiXiao !== null && zuiDa > zuiXiao) {
				zuiDa = Number(zuiDa)
				zuiXiao = Number(zuiXiao)
				
				this.shuRuKuang.value = Math.min(Math.max(this.shuRuKuang.value, zuiXiao), zuiDa)
			
				let zhanBi = (this.shuRuKuang.value - zuiXiao) / (zuiDa - zuiXiao)
	
				this.huaDongTiao.style.setProperty('left', `${zhanBi * 100}%`)
			}
		}

		this.gengXin(this.shuRuKuang.value)
    }
	// 添加选项
	tianJiaXuanXiang(xuanXiang) {
		let xuanXiangKuang = this.xuanXiangKuang
		xuanXiangKuang.innerHTML = ''

		for (let i of xuanXiang) {
			let xiang = new Option()
			xiang.value = i
			xiang.textContent = i
			xuanXiangKuang.appendChild(xiang)
		}
	}

	gengXin(zhi) {/* 由调用具体实现 */}
}

customElements.define('shu-ru-xiang', ShuRuXiang)